<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template slot="head">
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								style="width: 160px"
								@change="bizIdChange"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="关键字">
							<el-input
								v-model="search.keyword"
								placeholder="门店名称"
								clearable
								style="width: 200px"
								@change="refresh()"
							/>
						</cl-filter>
						<cl-filter label="所在地区">
							<!-- <cl-distpicker v-model="search.region" /> -->
							<cl-cascader
								v-model="search.region"
								:options="addressLevel"
								:props="{ checkStrictly: true }"
								style="width: 180px"
								clearable
								@change="refresh"
								filterable
							/>
							<!-- <cl-select
								v-model="search.region[0]"
								placeholder="请选择"
								filterable
								style="width: 180px"
								clearable
								@change="regionChange"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="(item, index) in cityList"
									:key="index"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select> -->
						</cl-filter>
						<cl-filter label="门店类型">
							<cl-select
								v-model="search.ctype"
								placeholder="请选择"
								filterable
								style="width: 160px"
								clearable
								@change="refresh"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="(item, index) in ctypeList"
									:key="index"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="门店状态">
							<cl-select
								v-model="search.status"
								placeholder="请选择"
								filterable
								style="width: 160px"
								clearable
								@change="refresh"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="(item, index) in statusList"
									:key="index"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle @export-file="exportFile" :isShow="false" />
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table" id="EarnestReceiveForm">
					<cl-empty slot="empty" />
					<template #column-opt="{ scope: { row } }">
						<el-button type="primary" @click="onCopy(row, $event)"> 复制 </el-button>
					</template>
				</cl-table>
			</el-row>
			<template slot="foot">
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
	import { copy } from "@/cool/modules/base";
	import threeLevel from "@/assets/countryLevel3";
	import { exportExcel } from "@/utils/excel";
	export default {
		name: "CusOtherStore",
		data() {
			return {
				cityList:[],
				addressLevel: threeLevel,
				// 表格配置
				table: {
					"context-menu": ["refresh"],
					columns: [
						{ label: "门店名称", prop: "dept_name", minWidth: 120 },
						{ label: "事业部", prop: "biz_name", minWidth: 120 },
						{
							label: "门店类型",
							prop: "ctype",
							minWidth: 100,
							formatter: ({ ctype }) => {
								return ctype == 1 ? "直营店" : ctype == 2 ? "直营托管" : "共享店";
							}
						},
						{
							label: "门店状态",
							prop: "bus_state",
							minWidth: 100,
							formatter: (row) => (row.bus_state == 1 ? "营业" : "停业")
						},
						{ label: "地址", prop: "store_address", minWidth: 250 },
						{ label: "所属城市", prop: "city_name", minWidth: 180 },
						{ label: "操作", prop: "opt", width: 150, fixed: "right" }
					]
				},
				ctypeList: [
					{ label: "直营店", value: 1 },
					{ label: "直营托管", value: 2 },
					{ label: "共享店", value: 3 }
				],
				statusList: [
					{ label: "营业", value: 1 },
					{ label: "停业", value: 2 }
				],
				search: {
					biz_id: "",
					region: [""], // 所在地区
					ctype: "",
					status: "",
					keyword: ""
				}
			};
		},

		created() {
			this.search.biz_id = this.getCurrBiz();
			this.getbizcity()
		},
		methods: {
			onLoad({ ctx, app }) {
				ctx.service(this.$service.dept)
					.set("dict", {
						api: {
							page: "deptList"
						}
					})
					.done();
				app.refresh(this.search);
				console.log(this.search);
			},
			bizIdChange(){
				this.getbizcity()
				this.refresh()
			},
			getbizcity(){
				const {biz_id} = this.search
				 this.$service.spread.getbizcity({ biz_id }).then(data => {
					let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
					this.cityList = list
				})
			},
			regionChange(data){
				console.log(data,'222222')
				this.search.region = [data]
				this.refresh()
			},
			// crud刷新
			refresh() {
				console.log(this.search);
				this.$refs.crud.refresh({ page: 1, ...this.search });
			},
			onCopy(row, ev) {
				if (row.addr == "") {
					this.$message.closeAll();
					this.$message.error("复制失败");
					return;
				}
				copy(row.store_address, ev);
			},
				// 导出EXCEl
			exportFile() {
				exportExcel("#EarnestReceiveForm");
			}
		}
	};
</script>

<style lang="scss" scoped></style>
